<!--
 * @Author: zhoulei0232
 * @Date: 2023-01-10 22:30:49
 * @LastEditTime: 2023-04-20 23:44:36
 * @LastEditors: zhoulei0232
 * @Description: 
-->
<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8">
      <el-col :span="6" class="col-div">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :on-change="handleChange"
          :file-list="fileList"
          :http-request="UploadImage"
          :before-upload="beforeAvatarUpload"
          :on-success="onSuccessImg"
        >
          <el-button type="primary" :loading="loadingBtn"
            >微店旧数据转换</el-button
          >
          <div slot="tip" class="el-upload__tip">请上传微店表格数据</div>
        </el-upload>
      </el-col>
      <el-col :span="6" class="col-div">
        <a href="http://106.52.238.239/word/index.html">word文档转xlsx工具</a>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb8">
      <el-col :span="6" class="col-div">
        <el-button type="primary" @click="jumpImg">图片压缩工具</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="oldData">
const { proxy } = getCurrentInstance();
const loadingBtn = ref(false);
// 图片上传地址
const uploadUrl =
  import.meta.env.VITE_APP_UPLOAD_API + "api/uploadOldData/file";
// 图片上传地址
const uploadUrl1 =
  import.meta.env.VITE_APP_UPLOAD_API + "api/uploadOldWord/file";
/** 上传用 */
function beforeAvatarUpload(rawFile) {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
}

function onSuccessImg(response) {}

function UploadImage(param) {
  const formData = new FormData();
  formData.append("file", param.file);
  proxy.downloadOld("/api/uploadOldData/old", formData, `旧数据模板.xlsx`);
}
// 图片压缩跳转
function jumpImg() {
  window.open("https://docsmall.com/image-compress");
}
</script>


<style lang="scss" scoped>
.app-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.color-blue {
  color: rgb(0, 119, 255);
  cursor: pointer;
}
.avatar-uploader {
  width: 400px;
  height: 100px;
  .avatar {
    width: 100%;
    height: 100%;
  }
}
.avatar-uploader :deep(.el-upload) {
  width: 100%;
  height: 100%;
  border: 1px dashed #dcdfe6;

  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.col-div {
  height: 100px;

  background-color: #f3f3f3;
  margin: 10px;
  border-radius: 6px;
  box-shadow: 2px 2px 6px #ddd;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.col-div:hover {
  margin-top: -1px;
  cursor: pointer;
  box-shadow: 6px 6px 10px #ccc;
}
</style>
